import { useState, useEffect } from "react"

const A = props => {
  const [num, setNum] = useState(1)
  const [count, setCount] = useState(1)

  // useEffect越多越好
  // 一个useEffect最好只处理一个副作用
  // 也就是说，不要把多个副作用放在同一个useEffect中

  // useEffct和useEffect之间是互不影响的
  useEffect(() => {
    console.log("fn1...");
    return () => {
      console.log("fn2...");
    }
  }, [num, count])
  
  // 依赖数据可以没有，fn2也可以没有
  useEffect(() => {
    console.log("发送ajax请求...");
  }, [num])

  return (
    <div>
      <h2>函数式组件</h2>
      <h3>{num}</h3>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <hr />
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default A;
